<template>
	<view class="bg-white" style="min-height: 100vh;">
		<cu-custom :title="title"></cu-custom>
		<view class="flex justify-center">
			<view style="width: 420rpx;">
				<u-divider text="请选择上课日期时间" textSize="32rpx" textColor="#333"></u-divider>
			</view>
		</view>
		<view class="margin-left-sm flex bg-gray padding-lr padding-tb-xs radius">
			<view class="flex align-center">
				<text>时间:</text>
			</view>
			<view class="margin-left-sm flex bg-gray padding-lr padding-tb-xs radius">
				<picker mode="date" :value="selectDate"	 
				:start="startDate" :end="endDate" @change="bindDateChange"
				format="yyyy-MM-dd HH:mm">
				<view class="uni-input">{{selectDate}}</view>
				</picker>
			</view>
			<view class="margin-left-sm flex bg-gray padding-lr padding-tb-xs radius">
				<text style="font-size: 14px; color: red; font-weight: bold;">(&nbsp;&nbsp;{{xingqi}}&nbsp;&nbsp;)</text>
			</view>			
		</view>
		<view class="text-gray text-sm margin-top-sm text-center">
			请在课程表上选择您想要预约上课的时间
		</view>
		
		<view class="margin-top padding-lr">
			<view class="flex text-center" style="background-color: #e6e6e6;">
				<view class="flex-sub padding-tb">上午</view>
				<view class="flex-sub padding-tb">下午</view>
				<view class="flex-sub padding-tb">晚上</view>
				<view class="flex-sub padding-tb">凌晨</view>
			</view>
			
			<view class="flex align-center text-center solid-bottom">
				<view class="flex-sub  padding-tb" :class="{'selected':item.isSelected  }"
				      v-for="(item,index)  in  TimeList" :key="index" @click="toggleSelect(item)">
				      {{item.name1}}
				</view>
			</view>
			<view class="flex align-center text-center solid-bottom">
				<view class="flex-sub  padding-tb" :class="{'selected':itema.isSelecteda  }"
				      v-for="(itema,indexa)  in  TimeList" :key="indexa" @click="toggleSelecta(itema)">
				      {{itema.name2}}
				</view>
			</view>
			<view class="flex align-center text-center solid-bottom">
				<view class="flex-sub  padding-tb" :class="{'selected':  itemb.isSelectedb  }"
				      v-for="(itemb,indexb)  in  TimeList" :key="indexb" @click="toggleSelectb(itemb)">
				      {{itemb.name3}}
				</view>
			</view>
			<view class="flex align-center text-center solid-bottom">
				<view class="flex-sub  padding-tb" :class="{'selected':  itemc.isSelectedc  }"
				      v-for="(itemc,indexc)  in  TimeList" :key="indexc" @click="toggleSelectc(itemc)">
				      {{itemc.name4}}
				</view>
			</view>
			 <view class="flex align-center text-center solid-bottom">
				<view class="flex-sub  padding-tb" :class="{'selected':  itemd.isSelectedd }"
				      v-for="(itemd,indexd)  in  TimeList" :key="indexd" @click="toggleSelectd(itemd)">
				      {{itemd.name5}}
				</view>
			</view>
			<view class="flex align-center text-center solid-bottom">
				<view class="flex-sub  padding-tb" :class="{'selected':  iteme.isSelectede  }"
				      v-for="(iteme,indexe)  in  TimeList" :key="indexe" @click="toggleSelecte(iteme)">
				      {{iteme.name6}}
				</view>
			</view> 
		</view>
		
		<view class="flex flex-between margin-top padding-lr text-gray">
			<view class="flex align-center">
				<text>是否重复</text>
				<view class="margin-left-sm flex bg-gray padding-lr padding-tb-xs radius">
					<text class="text-gray margin-right-xs">每周</text>
					<u-icon name="arrow-down-fill" color="#999" size="24rpx"></u-icon>
				</view>
			</view>
			<view class="flex align-center">
				<text>重复次数</text>
				<view class="margin-left-sm flex bg-gray padding-lr padding-tb-xs radius">
					<text class="text-gray margin-right-xs">10</text>
					<u-icon name="arrow-down-fill" color="#999" size="24rpx"></u-icon>
				</view>
			</view>
		</view>

		<view class="padding-lr-xl margin-lr-xl margin-top-lg text-center text-lg">
			当前选择:2021年12月15日-2022年02月16日(每周三10:00、11:00)
		</view>

		<view class="margin-top-xl padding-lr">
			<u-button @click="submit" color="#ea3457" type="primary" size="large" shape="circle" text="立即预约">
			</u-button>
		</view>

		<view class="flex align-center justify-center text-gray margin-top">
			<text class="margin-right-xs">我的全部预约课程</text>
			<u-icon name="arrow-right-double" color="#999" size="24rpx"></u-icon>
		</view>

		<!-- 确定预约弹窗 -->
		<u-modal @confirm="confirmDefine" @cancel="isShowDefine=false" :show="isShowDefine" confirmText="确认预约"
			confirmColor="#ea3457" showCancelButton content='是否确认向对方发起课程预约？'></u-modal>

		<!-- 预约成功弹窗 -->
		<u-modal @confirm="confirmSuccess" @cancel="isShowSuccess=false" :show="isShowSuccess" confirmText="发送信息"
			confirmColor="#ea3457" title="约课请求已发送" showCancelButton content='您的约课请求发送成功,请耐心等待对方确认,您也可以直接联系对方,催促对方尽快确认~'>
		</u-modal>

		<u-no-network></u-no-network>
	</view>
</template>

<script>
import { timer } from '../../common/filters/filters';
		
	export default {
		
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
							
			return {
				title:'',
				isShowDefine: false, //确定预约弹窗
				isShowSuccess: false, //预约成功弹窗
				selectDate:currentDate,
				xingqi:'',
				KcList:[],
				TimeList:[
				{id1:1,name1:"07:00",isSelected:false,id2:2,name2:"08:00",isSelecteda:false,id3:3,name3:"09:00",isSelectedb:false,id4:4,name4:"10:00",isSelectedc:false,id5:5,name5:"11:00",isSelectedd:false,id6:6,name6:"12:00",isSelectede:false},
				{id1:7,name1:"13:00",isSelected:false,id2:8,name2:"14:00",isSelecteda:false,id3:9,name3:"15:00",isSelectedb:false,id4:10,name4:"16:00",isSelectedc:false,id5:11,name5:"17:00",isSelectedd:false,id6:12,name6:"18:00",isSelectede:false},
				{id1:13,name1:"19:00",isSelected:false,id2:14,name2:"20:00",isSelecteda:false,id3:15,name3:"21:00",isSelectedb:false,id4:16,name4:"22:00",isSelectedc:false,id5:17,name5:"23:00",isSelectedd:false,id6:18,name6:"24:00",isSelectede:false},
				{id1:19,name1:"01:00",isSelected:false,id2:20,name2:"02:00",isSelecteda:false,id3:21,name3:"03:00",isSelectedb:false,id4:22,name4:"04:00",isSelectedc:false,id5:23,name5:"05:00",isSelectedd:false,id6:24,name6:"06:00",isSelectede:false},],
				
				 clickedValue: "",
			}
		},
		onLoad(e){
			console.log(e);
		},
		onShow() {

		},
		
		
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        },
		    },
			
		methods: {
			toggleSelect(item)  {
				console.log(item.id1);
			        item.isSelected  =  !item.isSelected;
			      },
			toggleSelecta(itema)  {
				console.log(itema.id2);
			        itema.isSelecteda  =  !itema.isSelecteda;
			      },
			toggleSelectb(itemb)  {
				console.log(itemb.id3);
			        itemb.isSelectedb  =  !itemb.isSelectedb;
			      },
			toggleSelectc(itemc)  {
				console.log(itemc.id4);
			        itemc.isSelectedc  =  !itemc.isSelectedc;
			      },
			toggleSelectd(itemd)  {
				console.log(itemd.id5);
			        itemd.isSelectedd  =  !itemd.isSelectedd;
			      },
			toggleSelecte(iteme)  {
				console.log(iteme.id6);
			        iteme.isSelectede  =  !iteme.isSelectede;
			      },
													  
			bindDateChange: function(e) {
				this.selectDate = e.detail.value;
				
				let urlkc='/GetWeekDayInfos/'
				let params={
					WeekDay:this.selectDate,
				}
				this.$H.post(urlkc,params).then(res =>{
						if(res.code==200)
						{
							this.xingqi=res.data[0]['WeekDay'];
						}
					})
			},
			
			//预约
			submit() {
				this.isShowDefine = true
			},

			//确认预约
			confirmDefine() {
				this.isShowDefine = false
				this.isShowSuccess = true
			},

			//预约成功发送信息
			confirmSuccess() {
				this.isShowSuccess = false
			},
			
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				let years = date.getFullYear();
				
					
				if (type === 'start') 
				{
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				
				let urlkc='/GetWeekDayInfos/'
				let params={
					WeekDay:`${years}-${month}-${day}`,
				}
				this.$H.post(urlkc,params).then(res =>{
						if(res.code==200)
						{
							this.xingqi=res.data[0]['WeekDay'];
						}
					})
					
				return `${year}-${month}-${day}`;
			},
			 getRowValue(index,columnName) {
				 console.log("Clicked row index:", index);
			     const row = this.TimeList[index][columnName];
			     
			     console.log(row);

			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.kc-active {
		background-color: #ea3457;
		color: #fff;
	}
	.zg{
		background-color: magenta;
	}
	.typeBox {
	  display: flex;
	  flex-wrap: wrap;
	  padding: 9px;
	  box-sizing: border-box;
	}
	.type_item {
	  width: calc(calc(100% - 30px) / 3);
	  height: 50px;
	  background: #fff;
	  color: #333;
	  font-size: 13px;
	  border-radius: 5px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  margin: 5px;
	}
	.typeActive {
	  background: #19a423;
	  color: #fff;
	}
	
	.padding-tb  {
	    /*  默认样式  */
	    /*  例如：padding:  10px;  */
	}
	
	.selected  {
	    background-color:  #ea3457;  /*  选中后的背景颜色  */
	    color:  #ffffff;  /*  选中后的文字颜色  */
	}
	
</style>

